<template>
<div class="allxueyuanshuo">
<section class="xueyuanshuo">
    <h1>学员说</h1>
    <div class="allcomment">
        <div class="comment" v-for="(el, index) in username" :key="index">
        <div class="text">{{pingjia[index]}}</div>
        <div class="user">
         <img src="../../../../public/img/touxiang.jpg" class="touxiang">
         <span>{{username[index]}}</span>
        </div>
        </div>
    </div>
  </section>
</div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            username:['1','2','3','4','5','6'],
            pingjia:['1','2','3','4','5','6']
        }
    },
    beforeMount() {
  axios.get('egg/student') 
  .then(response => {  
    let newusername =response.data.map(obj=>obj.username)
    this.username=newusername
    let newpingjia =response.data.map(obj=>obj.pingjia)
    this.pingjia=newpingjia
  })  
  .catch(error => {  
    console.error(error);  
  });
  },
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.allxueyuanshuo{
 background-color: rgb(230, 230, 230);
}
.xueyuanshuo {
  position: relative;
  background: transparent;
  text-align: left;
  border-bottom: none;
  border-radius: 0px;
  margin: 0px 80px;
 
}
h1{
    transition: all 0.2s ease 0s;
    color: rgb(51, 51, 51);
    font-size: 40px;
    display: block;
    line-height: 44px;
    font-weight: 600;
    text-align: center;
    margin: auto;
}
.allcomment {  
   margin-top: 12px;    
    position: relative;     
    display: flex;    
    flex-wrap: wrap;
}
.comment{
   width: 282px;  
    margin-top: 40px;  
    margin:50px auto;  
    position: relative; 
}
.text{
    padding: 54px 20px 20px;
    border-radius: 12px 12px 12px 0px;
    background-color: rgb(255, 255, 255);
    background-image: url(../../../../public/img/icon0.png);
    background-repeat: no-repeat;
    background-size: 18px 14px;
    background-position: 20px 20px;
}
.user{
    padding-top: 12px;
    background-image: url(../../../../public/img/corner.png);
    background-repeat: no-repeat;
    background-size: 40px 22px;
    display: flex;
    flex-direction: row;
    flex: initial;
    flex-wrap: initial;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
}
.touxiang{
    width: 40px;
    height: 40px;
    margin-left: 20px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: top;
}
.username{
    transition: all 0.2s ease 0s;
    color: rgb(102, 102, 102);
    font-size: 14px;
    display: inline-block;
    margin-left: 5px;
}
</style>